<template>
    <!--订花-->
    <div class="orderFlowers">
        <div class="left">
            <div class="l_top">
                <div class="item">
                    <div class="title">
                        <i class="fa fa-map-marker"></i>
                        <h4>地区</h4>
                    </div>
                    <ul>
                        <li :class="search.inCity==item.value?'pick':''" @click="search.inCity=item.value"
                            v-for="item in onlineAreaList">{{item.label}}
                        </li>
                    </ul>
                    <div style="width: 85%;margin:0 auto">
                        <el-divider></el-divider>
                    </div>
                </div>

                <div class="item">
                    <div class="title">
                        <i class="fa fa-send"></i>
                        <h4>用途</h4>
                    </div>
                    <ul>
                        <li :class="search.use==item.value?'pick':''" @click="search.use=item.value"
                            v-for="item in useList">{{item.label}}
                        </li>
                    </ul>
                    <div style="width: 85%;margin:0 auto">
                        <el-divider></el-divider>
                    </div>
                </div>

                <div class="item">
                    <div class="title">
                        <i class="fa fa-tree"></i>
                        <h4>花材</h4>
                    </div>
                    <ul>
                        <li :class="search.materia==item.value?'pick':''" @click="search.materia=item.value"
                            v-for="item in materialList">{{item.label}}
                        </li>
                    </ul>
                    <div style="width: 85%;margin:0 auto">
                        <el-divider></el-divider>
                    </div>
                </div>

                <div class="item">
                    <div class="title">
                        <i class="el-icon-s-grid"></i>
                        <h4>类别</h4>
                    </div>
                    <ul>
                        <li :class="search.category==item.value?'pick':''" @click="search.category=item.value"
                            v-for="item in goodsCategoryList">{{item.label}}
                        </li>
                    </ul>
                    <div style="width: 85%;margin:0 auto">
                        <el-divider></el-divider>
                    </div>
                </div>
                <div class="item">
                    <div class="title">
                        <i class="el-icon-s-grid"></i>
                        <h4>价格</h4>
                    </div>
                    <ul>
                        <li :class="search.price==i?'pick':''" @click="search.price=i" v-for="(item,i) in priceList">
                            <span v-if="item.max!=null">{{item.min}}-{{item.max}}元</span>
                            <span v-else>{{item.min}}元以上</span>
                        </li>
                    </ul>
                    <div style="width: 85%;margin:0 auto">
                        <el-divider></el-divider>
                    </div>
                </div>
                <div class="item">
                    <div class="title">
                        <i class="el-icon-s-grid"></i>
                        <h4>枝数</h4>
                    </div>
                    <ul>
                        <li :class="search.number==i?'pick':''" @click="search.number=i" v-for="(item,i) in numberList">
                            <span v-if="item.max!=null">{{item.min}}-{{item.max}}枝</span>
                            <span v-else>{{item.min}}枝以上</span>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
        <div class="right">
            <div class="sort">
                <ul>
                    <li :class="search.sort.val=='01'?'pick':''" @click="sort('01')">
                        综合
                    </li>
                    <li :class="search.sort.val=='02'?'pick':''" @click="sort('02')">
                        销量
                    </li>
                    <li :class="search.sort.val=='03'?'pick':''" @click="sort('03')">
                        价格
                        <i :class="search.sort.desc?'el-icon-caret-bottom':'el-icon-caret-top'">
                        </i>
                    </li>
                    <li :class="search.sort.val=='04'?'pick':''" @click="sort('04')">
                        最新
                    </li>
                    <li title="重置搜索条件" @click="search=Object.assign($options.data().search,{inCity:onlineAreaList.length>0?onlineAreaList[0].value:''})">
                        重置
                        <i class="el-icon-refresh"></i>
                    </li>

                </ul>
            </div>
            <div class="grid-wrapper">
                <el-row :gutter="20">
                    <el-col :span="6" style="margin-top: 10px" :key="item.id" v-for="(item,i) in dataList">
                        <el-card shadow="hover" style="width: 250px">
                            <div class="img-box">
                                <img width="100%" height="240" :src="item.homeImg" >
                            </div>
                            <div class="info-cont">
                                <div class="price">¥{{item.price}}</div>
                                <div class="title">{{item.name}}</div>
                                <div class="operate">
                                    <span @click="goGoosInfo(item)">查看详情</span>
                                    <span @click="$cart.add(item)">加入购物车</span>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div class="pager">
                <el-pagination
                        layout="prev, pager, next"
                        @current-change="handleCurrentChange"
                        :current-page.sync="page.currentPage"
                        :page-size="page.pageSize"
                        :total="page.total">>
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "shopping",
        data() {
            return {

                //数据
                dataList: [],
                //搜素
                search: {
                    //区划
                    inCity:"",
                    //用途
                    use: "",
                    //花材
                    materia: "",
                    //类别
                    category: "",
                    //价格
                    price: -1,
                    //数量
                    number: -1,
                    sort: {
                        //排序值-（01：综合；02：销量；03：价格；04：最新）
                        val: "01",
                        //排序方式
                        desc: true,
                    },
                },
                page: {
                    total: 0,  // 总记录数
                    currentPage: 1,  // 当前页数
                    pageSize: 20,  // 每页显示多少条
                },

                //上线区划
                onlineAreaList:[],
                //用途集合
                useList: [],
                //花材集合
                materialList: [],
                //列表集合
                goodsCategoryList: [],
                //价格集合
                priceList: [
                    {min: 0, max: 100},
                    {min: 100, max: 150},
                    {min: 150, max: 250},
                    {min: 250, max: 350},
                    {min: 350, max: 550},
                    {min: 550, max: 800},
                    {min: 800, max: null},
                ],
                //枝数集合
                numberList: [
                    {min: 1, max: 10},
                    {min: 10, max: 20},
                    {min: 20, max: 30},
                    {min: 30, max: 40},
                    {min: 40, max: 50},
                    {min: 50, max: 60},
                    {min: 60, max: 70},
                    {min: 70, max: 80},
                    {min: 80, max: 90},
                    {min: 90, max: 100},
                    {min: 100, max: null},
                ],
            }
        },
        watch: {
            search: {
                deep: true,
                handler: function (newV) {
                    this.getList();
                }
            }
        },
        created() {
            this.init();
        },
        methods: {

            //前往商品详细
            goGoosInfo(item){
                this.$router.push({path:'/home/goods_info/'+item.id})
            },

            //搜索
            getList() {
                let query = Object.assign({
                    inCity:  this.search.inCity,
                    use:  this.search.use,
                    materia: this.search.materia,
                    category: this.search.category,
                    sort: JSON.stringify(this.search.sort)
                }, this.page);
                if (this.search.number != -1 && this.search.number != null) {
                    query["numberVo"] = this.numberList[this.search.number]
                }
                if (this.search.price != -1 && this.search.price != null) {
                    query["priceVo"] = JSON.stringify(this.priceList[this.search.price])
                }
                this.$HttpService.get("/info-goods/notLogin/findPage", query).then(res => {
                    this.dataList = res.records.map(x=>{
                        x.homeImg=this.$util.getFileUrl(x.homeImg);
                        return x;
                    });
                    this.page.total = res.total;
                })

            },

            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.getList();
            },


            //排序
            sort(val) {
                this.search.sort.val = val;
                this.search.sort.desc = val !== '03' ? true : !this.search.sort.desc;
            },

            //初始化
            init() {
                //获取用途集合
                this.$HttpService.get("/common/getItem/use").then(res => {
                    this.useList = res;
                })
                //获取花材集合
                this.$HttpService.get("/common/getItem/material").then(res => {
                    this.materialList = res;
                })
                //获取类别集合
                this.$HttpService.get("/common/getItem/goods_category").then(res => {
                    this.goodsCategoryList = res;
                })
                this.$HttpService.get("/common/getItem/online_area").then(res => {
                    this.onlineAreaList = res;
                    this.search.inCity=this.onlineAreaList.length>0?this.onlineAreaList[0].value:"";
                    this.getList();
                })

            },
        }
    }
</script>

<style lang="scss">
    .orderFlowers {
        width: 70%;
        margin: 0 auto;
        padding-top: 20px;
        display: flex;

        .left {
            width: 20%;
            border: 1px solid #cccccc;
            height: 100%;

            .l_top {
                width: 100%;
                margin-bottom: 20px;

                .item {
                    position: relative;

                    .title {
                        position: absolute;
                        top: 5%;
                        left: 3%;
                        width: 32px;
                        text-align: center;
                        color: #ff6600;

                        i {
                            font-size: 25px;
                        }
                    }

                    ul {
                        margin-top: 10px;
                        margin-bottom: 10px;
                        margin-left: 50px;
                        font-size: 12px;
                        line-height: 22px;

                        li {
                            margin-left: 10px;
                            margin-top: 3px;
                            cursor: pointer;
                            font-size: 12px;
                            line-height: 22px;
                            width: 40%;
                            margin-right: -3 px;
                            padding: 0;
                            display: inline-block;
                        }

                        li:hover {
                            color: #ff6a00;
                            text-decoration: underline;
                        }
                    }
                }


            }
        }

        .right {
            margin-left: 10px;
            flex: 1;

            .sort {
                height: 32px;
                margin-bottom: 10px;
                padding: 0 10px;
                background-color: #ebebeb;

                ul {
                    font-size: 15px;
                    line-height: 32px;
                    float: left;
                    padding-left: 0;
                    list-style: none;
                    margin-left: -5 px;
                    margin-top: 0;
                    margin-bottom: 10px;

                    li {
                        margin: 0 8px;
                        display: inline-block;
                        padding-left: 5px;
                        padding-right: 5px;
                        cursor: pointer;
                    }

                    li:hover {
                        color: #ff6a00;
                        text-decoration: underline;
                    }
                }
            }

            .grid-wrapper {
                .img-box {
                    position: relative;
                    overflow: hidden;
                    width: 220px;
                    height: 240px;
                    margin-bottom: 10px;
                }

                .info-cont {
                    .price {
                        margin-bottom: 8px;
                        color: #ff6a00;
                    }

                    .title {
                        font-size: 12px;
                        line-height: 18px;
                        overflow: hidden;
                        height: 36px;
                        text-align: justify;
                    }

                    .operate {
                        display: flex;
                        span {
                            font-size: 12px;
                            display: inline-block;
                            width: 107px;
                            padding: 4px 0;
                            text-align: center;
                            border: 1px solid #d9d9d9;
                            cursor: pointer;
                        }

                        span:hover {
                            background: #ffa20d;
                            color: #ffffff;
                        }

                        .attention {
                            color: #888;
                        }

                    }
                }
            }

            .pager {
                text-align: center;
                margin-top: 30px;
                margin-bottom: 30px;
            }
        }
    }

    .pick {
        color: #ff6a00;
        text-decoration: underline;
    }
</style>
